import { CalendarToday, LocationSearching, MailOutline, PermIdentity, PhoneAndroid ,Publish} from '@material-ui/icons'
import React from 'react'
import './user.css'
import {Link} from "react-router-dom"

export default function User() {
    return (
        <div className='user'>
            <div className="userTitleContainer">
                <h1 className="userTitle">Edit User</h1>
                <Link to="/newUser">
                    <button className="userAddButton">Create</button>
                </Link>
            </div>
            <div className="userContainer">
                <div className="userShow">
                    <div className="userShowTop">
                        <img src="https://img.99tu.com:9988/uploads/allimg/c201219/160S0WS6340-105219.jpg"
                        alt="" className="userShowImg" />
                         <div className="userShowTopTitle">
                            <span className="userShowUsername">Anna Becker</span>
                            <span className="userShowUserTitle">Software Engineer</span>
                        </div>
                    </div>
                    <div className="userShowBottom">
                        <span className="userShowTitle">Account Details</span>
                        <div className="userShowInfo">
                            <PermIdentity className='userShowIcon' />
                            <span className="userShowInfoTitle">annabeck99</span>
                        </div>
                        <div className="userShowInfo">
                             <CalendarToday className='userShowIcon'/>
                            <span className="userShowInfoTitle">10.12.1999</span>
                        </div>
                        <span className="userShowTitle">Content Details</span>
                        <div className="userShowInfo">
                             <PhoneAndroid className='userShowIcon'/>
                            <span className="userShowInfoTitle">+1 123 456 67</span>
                        </div>
                        <div className="userShowInfo">
                             <MailOutline className='userShowIcon'/>
                            <span className="userShowInfoTitle">snnsbeck99@gmail.com</span>
                        </div>
                        <div className="userShowInfo">
                             <LocationSearching className='userShowIcon'/>
                            <span className="userShowInfoTitle">NewYork | USA</span>
                        </div>
                        
                    </div>
                   
                </div>
                <div className="userUpdate">
                   <div className="userUpdateTitle">Edit</div>
                   <form action="" className="userUpdateForm">
                       <div className="userUpdateLeft">
                           <div className="userUpdateItem">
                               <label htmlFor="">Username</label>
                               <input type="text"
                                placeholder='annabeck99'
                                className='userUpdateInput'
                               />
                           </div>
                           <div className="userUpdateItem">
                               <label htmlFor="">Full name</label>
                               <input type="text"
                                placeholder='Anna Becker'
                                className='userUpdateInput'
                               />
                           </div>
                           <div className="userUpdateItem">
                               <label htmlFor="">Email</label>
                               <input type="text"
                                placeholder='snnsbeck99@gmail.com'
                                className='userUpdateInput'
                               />
                           </div>
                           <div className="userUpdateItem">
                               <label htmlFor="">Phone</label>
                               <input type="text"
                                placeholder='+1 123 456 67'
                                className='userUpdateInput'
                               />
                           </div>
                           <div className="userUpdateItem">
                               <label htmlFor="">Address</label>
                               <input type="text"
                                placeholder='NewYork | USA'
                                className='userUpdateInput'
                               />
                           </div>
                       </div>
                       <div className="userUpdateRight">
                           <div className="userUpdateUpload">
                               <img 
                               src="https://tse3-mm.cn.bing.net/th/id/OIP-C.5A3dI7UtO1l-uBhszfRrNgAAAA?w=203&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                                alt=""
                                className='userUpdateImg' />
                                <label htmlFor="file"><Publish className='userUpdateIcon'/></label>
                                <input type="file" id="file" style={{display:"none"}} />
                           </div>
                           <button className='userUpdateButton'>Update</button>
                       </div>
                   </form>
                </div>
            </div>
        </div>
    )
}
